<!DOCTYPE html>
<html lang="zh-CN"><!--编码标准-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>隐士世界</title>
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <!--网页图标引入-->
    <link rel="shortcut icon" href="images/fox.ico" type="image/x-icon">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body  style="background-color: #e9e9e9">
        <!--顶部导航栏-->
        <nav class="header header-replace navbar" id="header-replace">
            
        </nav>
        <nav class="header navbar" id="header">
            <div class="logo">
                <a href="javascript:void(0);"><img src="images/fox.ico" alt=""></a>
            </div>
            <div class="header-word-y">
                <a href="javascript:void(0);" class="visible-md-inline-block visible-lg-inline-block">
                    隐士
                    <span></span>
                    hideer For luckey！
                </a>
                <span class="top-interval visible-md-inline-block visible-lg-inline-block"></span>
                <a href="javascript:void(0);">
                    文章
                    <span class="interval"></span>
                </a>
                <span class="top-interval"></span>
                <a href="javascript:void(0);">目录
                    <span class="interval"></span>

                </a>
                <span class="top-interval"></span>
                <a href="javascript:void(0);">Tips
                    <span class="interval"></span>

                </a>
                <span class="top-interval"></span>
                <a href="javascript:void(0);">留言
                    <span class="interval"></span>

                </a>
                <span class="top-interval"></span>
                <a href="javascript:void(0);">关于
                    <span class="interval"></span>

                </a>
                <span class="top-interval visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"></span>
                <a href="javascript:void(0);" class="visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><i class="iconfont">&#xe634;</i></a>
                <span class="top-interval visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"></span>
                <a href="javascript:void(0);" class="visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><i class="iconfont">&#xe62a;</i></a>
                <span class="top-interval visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"></span>
                <a href="javascript:void(0);" class="visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><i class="iconfont">&#xe7dd;</i></a>
                <span class="top-interval visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"></span>
                <a href="javascript:void(0);" class="visible-sm-inline-block visible-md-inline-block visible-lg-inline-block"><i class="iconfont">&#xe616;</i></a>
            </div>
        </nav>

        <!--侧边导航栏-->

        <!--更多按钮-->
        <div id="btn-more-y" class="btn-more-y col-lg-offset-11 col-md-offset-11 col-sm-offset-11 col-xs-offset-10">
            <i class="iconfont">&#xe617;</i>
            <!--移动框-->
        <div id="box_move-y" class="box_move-y">
            <div class="side-top">
                <div style="background-color: red;height: 100px;width: 300px;">
                </div>
                <div class="myimg"></div>
            </div>
            <div class="side-bottom">
                <h4 class="tips-word">
                    小隐，隐于市
                </h4>
                <p>潜心、潜行、潜性</p>

                <div class="home">
                    <a href="javascript:void(0);"><i class="iconfont">&#xe623;</i></a>
                </div>
                <ul>
                    <li><a href="javascript:void(0);">主页</a></li>
                    <li><a href="javascript:void(0);">所有文章</a></li>
                    <li><a href="javascript:void(0);">demo</a></li>
                    <li><a href="javascript:void(0);">个人作品</a></li>
                </ul>
                <div class="link-more">
                    <a href="javascript:void(0);"><i class="iconfont">&#xe608;</i></a>
                    <a href="javascript:void(0);"><i class="iconfont">&#xe6b6;</i></a>
                    <a href="javascript:void(0);"><i class="iconfont">&#xe619;</i></a>
                    <a href="javascript:void(0);"><i class="iconfont">&#xe672;</i></a>
                </div>
            </div>
        </div>
        </div>
        
        <!--轮播-->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!--下拉提示按钮-->
            <div id="dropdown-tips-y" class="dropdown-tips-y">
                <i class="iconfont">&#xe610;</i>
            </div>
            <ol class="carousel-indicators slideshow-dot-y">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/banner1.jpg" alt="...">
                    <div class="carousel-caption slideshow-word-y">
                        第一张图片
                    </div>
                </div>
                <div class="item">
                    <img src="images/banner2.jpg" alt="...">
                    <div class="carousel-caption slideshow-word-y">
                        第二张图片
                    </div>
                </div>
                <div class="item">
                    <img src="images/banner3.jpg" alt="...">
                    <div class="carousel-caption slideshow-word-y">
                        第三张图片
                    </div>
                </div>
            </div>

            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>
        <!--主要内容区域-->
        
        <div class="container">
            <div class="row">
                <!--container要和row一起使用-->
                <div class="colCss-leftRight-y col-lg-8 col-md-8 col-sm-8">
                    <div class="flex" id="contentParent">
                        <!--普通文本样式-->
                        <div class="flex-leftRight-y">
                            <h4 class="title"><a href="javascript:void(0);">第一个文章-编者安</a></h4>
                            <div class="auther">
                                <span>作者：<a href="javascript:void(0);">钟婷</a></span>
                                ·<span>2017年10月1日</span>
                            </div>
                            <h4 class="other-title"><a href="javascript:void(0);">副标题-编者安</a></h4>
                            <div class="content">
                                <p>做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。</p>
                            </div>
                            <div class="btn-more">
                                <a href="javascript:void(0);">阅读全文</a>
                            </div>
                            <hr>
                            <div class="tips">
                                <i class="iconfont">&#xe95c;</i>
                                <a href="javascript:void(0)">csdn极客</a>,
                                <a href="javascript:void(0)">github</a>
                            </div>
                        </div>
                        <!--带图片的文本-->
                        <div class="flex-leftRight-y">
                            <h4 class="title"><a href="javascript:void(0);">第er个文章-编者安</a></h4>
                            <div class="auther">
                                <span>作者：<a href="javascript:void(0);">钟婷</a></span>
                                ·<span>2017年10月1日</span>
                            </div>
                            <h4 class="other-title"><a href="javascript:void(0);">副标题-编者安</a></h4>
                            <div class="content">
                                <img src="images/banner3.jpg" alt="" style="width: 100%">
                                <p>做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。做一个响应式的博客系统，前端利用bootstrap技术，后端利用nodejs和mongoose技术进行数据的处理。。。</p>
                            </div>
                            <div class="btn-more">
                                <a href="javascript:void(0);">阅读全文</a>
                            </div>
                            <hr>
                            <div class="tips">
                                <i class="iconfont">&#xe95c;</i>
                                <a href="javascript:void(0)">csdn极客</a>,
                                <a href="javascript:void(0)">github</a>
                            </div>
                        </div>
                        <div class="flex-leftRight-y">这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，这是一个测试，
                        </div>
                    </div>
                </div>
                <div class="colCss-leftRight-y col-lg-4 col-md-4 col-sm-4">
                    <div class="flex">
                        <div class="flex-right-y">
                            <h5 class="mycall-y">
                                <span>我的社交</span>
                            </h5>
                            <div class="wechat">
                                微信：<a href="javascript:void(0);">xxxxxxxx</a>
                            </div>
                            <div class="wechat">
                                联系电话：<a href="javascript:void(0);">xxxxxxxx</a>
                            </div>
                            <div class="github">
                                <i class="iconfont">&#xe6b6;</i>
                                <a href="javascript:void(0);">GitHub专区</a>
                            </div>
                        </div>
                        <div class="flex-right-y">
                            <h5 class="mycall-y">
                                <span>建议意见-盒子</span>
                            </h5>
                            <form action="">
                                <div class="input-group">
                                  <span class="input-group-addon" id="basic-addon1">@</span>
                                  <input type="text" class="form-control" placeholder="Yourname" aria-describedby="basic-addon1">
                                </div>
                                <input type="text" id="inputHelpBlock" class="form-control separate-y" aria-describedby="helpBlock">
                                <div class="btn-box-y">
                                    <input class="btn btn-default separate-y" type="submit" value="提交">
                                </div>
                            </form>
                        </div>
                        <div class="flex-right-y">
                            <h5 class="mycall-y">
                                <span>时光印记-Tips</span>
                            </h5>
                            <div class="tips-box-y">
                                <a href="javascript:void(0);">nodejs</a>
                                <a href="javascript:void(0);">javascript</a>
                                <a href="javascript:void(0);">react</a>
                                <a href="javascript:void(0);">mongoose</a>
                                <a href="javascript:void(0);">vue</a>
                                <a href="javascript:void(0);">webapp</a>
                                <a href="javascript:void(0);">css3</a>
                                <a href="javascript:void(0);">margin</a>
                                <a href="javascript:void(0);">javaquery</a>
                                <a href="javascript:void(0);">...</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid footer-y">
            <div class="row">
                <div class="pull-left col-lg-5 col-md-5 col-sm-5">
                    <div class="word-box-y">
                        <p>&copy;2016-2017,Content By hideer. All Right Reserved</p>
                        <p>Welcome to my'blos, Thanks!</p>
                        <p>A person is rarely not endowed with a virtuous nature at birth, but scarcely could anyone keep it to death. The book of songs da ya dang.</p>
                    </div>
                </div>
                <div class="col-lg-2 col-lg-push-5 col-md-2 col-md-push-5 col-sm-3 col-sm-push-4">
                    <div class="end-y">
                        <div class="footer-tips">
                            <a href="javascript:void(0);" id="footer-wechat-y">
                                <i class="iconfont">&#xe619;</i>
                                <div class="img-wechat-y" id="img-wechat-y"></div>
                            </a>
                            <a href="javascript:void(0);">
                                <i class="iconfont">&#xe6b6;</i>
                            </a>
                            <a href="javascript:void(0);">
                                <i class="iconfont">&#xe672;</i>
                            </a>
                            <a href="javascript:void(0);">
                                <i class="iconfont">&#xe600;</i>
                            </a>
                        </div>
                        <div class="vistor-y">
                            您是第 <span>29876</span> 位访客
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
    </body>
</html>